<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    user-select: none;
  }

  body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: #222;
  }

  .container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 80px;
    transition: transform 0.5s;
  }

  .progress {
    position: relative;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    color: #fff;
    background: #444 linear-gradient(to right, transparent 50%, var(--clr) 0);
  }



  .progress h3 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2.5rem;
    z-index: 1;
    font-weight: 500;
  }

  .progress h3 span {
    font-size: 0.65rem;
    font-weight: normal;
  }

  .progress h4 {
    position: absolute;
    top: 62%;
    left: 50%;
    transform: translateX(-50%);
    text-transform: uppercase;
    color: var(--clr);
    z-index: 1;
  }

  .container .progress::before {
    content: '';
    display: block;
    height: 100%;
    margin-left: 50%;
    transform-origin: left;
    border-radius: 0 100% 100% 0/50%;
  }

  .container .progress::after {
    content: '';
    position: absolute;
    inset: 10px;
    border-radius: 50%;
    background: #222;
  }

  .container .progress::before {
    background: var(--clr);
    transform: rotate(calc((var(--i) - 50) * 0.01turn));
  }

  .container .progress.less::before {
    background: #444;
    transform: rotate(calc((var(--i) - 0) * 0.01turn));
  }
</style>

<body>
  <div class="container">
    <div class="progress" style="--i:85;--clr:#43f94a">
      <h3>85<span>%</span></h3>
      <h4>html</h4>
    </div>
    <div class="progress" style="--i:62;--clr:#2ccde9">
      <h3>62<span>%</span></h3>
      <h4>css</h4>
    </div>
    <div class="progress less" style="--i:35;--clr:#fb297b">
      <h3>35<span>%</span></h3>
      <h4>javascript</h4>
    </div>
    <div class="progress" style="--i:78;--clr:#ffe047">
      <h3>78<span>%</span></h3>
      <h4>photoshop</h4>
    </div>
  </div>
</body>

</html>